import { Horizontal, Vertical } from '../layout/FlexBox'
import { Space } from '../layout/Space'
import { Stretch } from '../layout/Stretch'
import { Button } from '../widgets/Button'
import { Text } from '../widgets/Text'
import { InputWord } from './InputWord'

export function TerminalLogin() {
  return (
    <Vertical>
      <Stretch value={1} />

      <Text label="配置终端信息" color="#333" fontSize={36} />
      <Space value={100} />

      <Vertical width={875} height={360}>
        <InputWord label="服务器地址" placeHolder="请输入服务器地址（必填）" />
        <InputWord label="服务器端口" placeHolder="请输入端口号（必填）" />
        <InputWord label="终端账号" placeHolder="请输入终端账号（必填）" />
        <InputWord label="终端密码" placeHolder="请输入终端密码（必填）" />
      </Vertical>

      <Space value={80} />

      <Horizontal space={56}>
        <Button
          label="去设置网络"
          width={152}
          height={57}
          border="1px solid #00B3A6"
          color="#00B3A6"
          fontSize={18}
          borderRadius={6}
        />
        <Space value={120} />
        <Button
          label="完成"
          width={152}
          height={57}
          border="1px solid #CBCBCB"
          color="#fff"
          bgColor="#CBCBCB"
          fontSize={18}
          borderRadius={6}
        />
      </Horizontal>

      <Stretch value={2} />
    </Vertical>
  )
}
